<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/index.css">
    <title>企业注册认证</title>
    <style>
        .register-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            margin-top: 30px;
        }

        .user-avatar {
            text-align: center;
            margin-bottom: 20px;
        }

        .user-avatar img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }

        .auth-btn {
            background-color: #e64340;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
        }

        .steps {
            display: flex;
            justify-content: space-between;
            margin: 20px 0;
            position: relative;
        }

        .steps::before {
            content: '';
            position: absolute;
            top: 15px;
            left: 50px;
            right: 50px;
            height: 2px;
            background-color: #e6e6e6;
            z-index: 1;
        }

        .step-item {
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .step-dot {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #e6e6e6;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #999;
            margin-bottom: 5px;
        }

        .step-dot.active {
            background-color: #ff6b6b;
            color: white;
        }

        .step-text {
            font-size: 14px;
            color: #666;
        }

        .step-text.active {
            color: #ff6b6b;
            font-weight: bold;
        }

        .form-section {
            background-color: #f5f7fa;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
        }

        .form-section-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }

        .el-form {
            width: 100%;
        }

        .el-form-item {
            margin-bottom: 20px;
        }

        .el-form-item__label {
            font-weight: 500;
        }

        .el-input,
        .el-select {
            width: 100%;
        }

        .submit-section {
            text-align: center;
            margin-top: 30px;
        }

        .btn-prev,
        .btn-next {
            padding: 8px 20px;
            margin: 0 10px;
        }

        .btn-next {
            background-color: #ff6b6b;
            color: white;
            border: none;
        }

        .required {
            color: #f56c6c;
            margin-right: 4px;
        }

        .upload-tips {
            font-size: 12px;
            color: #909399;
            margin-top: 5px;
        }

        .phone-tips {
            font-size: 12px;
            color: #ff6b6b;
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="register-container">
            <!-- 用户头像和认证状态  -->
            <div class="user-avatar">
                <img src="../../../assets/user-avatar.png" alt="用户头像">
                <button class="auth-btn">认证用户认证</button>
            </div>

            <!-- 步骤指示器 -->
            <div class="steps">
                <div class="step-item">
                    <div class="step-dot active">1</div>
                    <div class="step-text active">完善资料</div>
                </div>
                <div class="step-item">
                    <div class="step-dot">2</div>
                    <div class="step-text">在线验证</div>
                </div>
                <div class="step-item">
                    <div class="step-dot">3</div>
                    <div class="step-text">认证成功</div>
                </div>
            </div>

            <!-- 数据表配置 -->
            <div id="form"
                :data-options="JSON.stringify({'tableName':'enterprise_info','formName':'dataForm' ,'primaryKey':'Enterprise_Info_SerialNumber'})">
                <div
                    :data-options="JSON.stringify({'tableName':'enterprise_history','formName':'childDataForm' ,'parentTableName':'enterprise_info'})">
                </div>
            </div>

            <!-- 企业基本信息 -->
            <div class="form-section">
                <div class="form-section-title">基本信息</div>
                <el-form :model="dataForm" ref="form" :rules="rules" :inline-message="true">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="企业全称" prop="Enterprise_Name" :required="true">
                                <el-input v-model="dataForm.Enterprise_Name" placeholder="请输入企业全称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="企业类型" prop="Enterprise_Type" :required="true">
                                <el-select v-model="dataForm.Enterprise_Type" placeholder="请选择企业类型">
                                    <el-option label="贸易商" value="贸易商"></el-option>
                                    <el-option label="生产商" value="生产商"></el-option>
                                    <el-option label="服务商" value="服务商"></el-option>
                                    <el-option label="其他" value="其他"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="统一社会信用代码" prop="Credit_Code" :required="true">
                                <el-input v-model="dataForm.Credit_Code" placeholder="请输入统一社会信用代码"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="通讯地址省市区" prop="Province_City_District" :required="true">
                                <el-select v-model="dataForm.Province_City_District" placeholder="请选择省市区">
                                    <el-option label="北京市" value="北京市"></el-option>
                                    <el-option label="上海市" value="上海市"></el-option>
                                    <el-option label="广东省" value="广东省"></el-option>
                                    <!-- 更多选项可根据实际需求添加 -->
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="详细地址" prop="Detail_Address" :required="true">
                                <el-input v-model="dataForm.Detail_Address" placeholder="请输入详细地址"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="邮箱" prop="Email">
                                <el-input v-model="dataForm.Email" placeholder="请输入收件邮箱"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="业务推荐人" prop="Referrer">
                                <el-input v-model="dataForm.Referrer" placeholder="请输入业务推荐人"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <!-- 开票信息 -->
            <div class="form-section">
                <div class="form-section-title">开票信息 <span
                        style="font-size: 12px; font-weight: normal; color: #999;">请核实开票信息，此开票信息将作为后续开票的依据</span></div>
                <el-form :model="dataForm" ref="form" :rules="rules" :inline-message="true">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="开票名称" prop="Invoice_Name" :required="true">
                                <el-input v-model="dataForm.Invoice_Name" placeholder="请输入开票名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="统一社会信用代码" prop="Invoice_Credit_Code" :required="true">
                                <el-input v-model="dataForm.Invoice_Credit_Code" placeholder="请输入统一社会信用代码"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="注册地址" prop="Registered_Address" :required="true">
                                <el-input v-model="dataForm.Registered_Address" placeholder="请输入注册地址"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="开票单位联系电话" prop="Invoice_Phone" :required="true">
                                <el-input v-model="dataForm.Invoice_Phone" placeholder="请输入开票单位联系电话"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="开户行" prop="Bank_Name" :required="true">
                                <el-input v-model="dataForm.Bank_Name" placeholder="请输入开户行"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="开票账号" prop="Bank_Account" :required="true">
                                <el-input v-model="dataForm.Bank_Account" placeholder="请输入银行账号"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <!-- 法人信息 -->
            <div class="form-section">
                <div class="form-section-title">法人信息</div>
                <el-form :model="dataForm" ref="form" :rules="rules" :inline-message="true">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="证件类型" prop="Legal_ID_Type" :required="true">
                                <el-select v-model="dataForm.Legal_ID_Type" placeholder="请选择证件类型">
                                    <el-option label="中国大陆身份证" value="中国大陆身份证"></el-option>
                                    <el-option label="护照" value="护照"></el-option>
                                    <el-option label="其他" value="其他"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="法定代表人姓名" prop="Legal_Person_Name" :required="true">
                                <el-input v-model="dataForm.Legal_Person_Name" placeholder="请输入法定代表人姓名"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="证件号码" prop="Legal_ID_Number" :required="true">
                                <el-input v-model="dataForm.Legal_ID_Number" placeholder="请输入证件号码"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <!-- 管理员信息 -->
            <div class="form-section">
                <div class="form-section-title">管理员信息 <span
                        style="font-size: 12px; font-weight: normal; color: #999;">管理员拥有管理后台的全部管理权限，包括员工管理、角色权限调整、修改企业信息等功能</span>
                </div>
                <el-form :model="dataForm" ref="form" :rules="rules" :inline-message="true">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="管理员姓名" prop="Admin_Name" :required="true">
                                <el-input v-model="dataForm.Admin_Name" placeholder="请输入与当前登录手机号实名一致的姓名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="管理员身份证号码" prop="Admin_ID_Number" :required="true">
                                <el-input v-model="dataForm.Admin_ID_Number"
                                    placeholder="请输入与当前登录手机号实名一致的身份证号码"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="管理员手机号" prop="Admin_Phone" :required="true">
                                <el-input v-model="dataForm.Admin_Phone" disabled></el-input>
                                <div class="phone-tips">当前填写的手机号需与管理员姓名信息一致，若手机号非本人实名认证，则不可认证，您可在账号安全中更换手机号</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="验证码" prop="Verification_Code" :required="true">
                                <el-row :gutter="10">
                                    <el-col :span="14">
                                        <el-input v-model="dataForm.Verification_Code" placeholder="请输入验证码"></el-input>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-button type="primary" @click="sendVerificationCode"
                                            :disabled="countdown > 0">
                                            {{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}
                                        </el-button>
                                    </el-col>
                                </el-row>
                                <div class="upload-tips">欠最多获取10次/日验证码，超过请明日再来，今天剩余：10次</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <!-- 协议确认 -->
            <el-form-item>
                <el-checkbox v-model="agreement">提交即代表您同意《用户服务协议》、《实名认证协议》、《保密协议》和《隐私政策》</el-checkbox>
            </el-form-item>

            <!-- 提交按钮 -->
            <div class="submit-section">
                <el-button class="btn-prev" @click="prevStep">上一步</el-button>
                <el-button class="btn-next" type="primary" @click="submitForm">下一步</el-button>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    dataForm: {
                        // 基本信息
                        Enterprise_Name: '',
                        Enterprise_Type: '贸易商',
                        Credit_Code: '',
                        Province_City_District: '',
                        Detail_Address: '',
                        Email: '',
                        Referrer: '',

                        // 开票信息
                        Invoice_Name: '',
                        Invoice_Credit_Code: '',
                        Registered_Address: '',
                        Invoice_Phone: '',
                        Bank_Name: '',
                        Bank_Account: '',

                        // 法人信息
                        Legal_ID_Type: '中国大陆身份证',
                        Legal_Person_Name: '',
                        Legal_ID_Number: '',

                        // 管理员信息
                        Admin_Name: '',
                        Admin_ID_Number: '',
                        Admin_Phone: '13503631553', // 默认显示当前手机号
                        Verification_Code: '',
                    },
                    agreement: false,
                    : countdown 0,
                    rules: {
                        Enterprise_Name: [{ required: true, message: '请输入企业全称', trigger: 'blur' }],
                        Enterprise_Type: [{ required: true, message: '请选择企业类型', trigger: 'change' }],
                        Credit_Code: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
                        Province_City_District: [{ required: true, message: '请选择省市区', trigger: 'change' }],
                        Detail_Address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
                        Invoice_Name: [{ required: true, message: '请输入开票名称', trigger: 'blur' }],
                        Invoice_Credit_Code: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
                        Registered_Address: [{ required: true, message: '请输入注册地址', trigger: 'blur' }],
                        Invoice_Phone: [{ required: true, message: '请输入开票单位联系电话', trigger: 'blur' }],
                        Bank_Name: [{ required: true, message: '请输入开户行', trigger: 'blur' }],
                        Bank_Account: [{ required: true, message: '请输入银行账号', trigger: 'blur' }],
                        Legal_ID_Type: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
                        Legal_Person_Name: [{ required: true, message: '请输入法定代表人姓名', trigger: 'blur' }],
                        Legal_ID_Number: [{ required: true, message: '请输入证件号码', trigger: 'blur' }],
                        Admin_Name: [{ required: true, message: '请输入管理员姓名', trigger: 'blur' }],
                        Admin_ID_Number: [{ required: true, message: '请输入管理员身份证号码', trigger: 'blur' }],
                        Verification_Code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
                    }
                };
            },
            mounted() {
                // 初始化时可以从后台获取管理员手机号等信息
                this.dataForm.Invoice_Name = this.dataForm.Enterprise_Name;
                this.dataForm.Invoice_Credit_Code = this.dataForm.Credit_Code;
            },
            methods: {
                // 发送验证码
                sendVerificationCode() {
                    if (!this.dataForm.Admin_Phone) {
                        this.$message.error('请输入手机号');
                        return;
                    }

                    // 这里可以调用发送验证码的API
                    console.log('发送验证码到:', this.dataForm.Admin_Phone);

                    // 开始倒计时
                    this.countdown = 60;
                    const timer = setInterval(() => {
                        this.countdown--;
                        if (this.countdown <= 0) {
                            clearInterval(timer);
                        }
                    }, 1000);
                },

                // 上一步
                prevStep() {
                    // 这里可以实现上一步的逻辑
                    console.log('上一步');
                },

                // 提交表单
                submitForm() {
                    this.$refs.form.validate((valid) => {
                        if (valid && this.agreement) {
                            // 表单验证通过且同意协议
                            console.log('提交表单数据:', this.dataForm);

                            // 这里可以调用保存数据的API
                            // 保存成功后跳转到下一步
                            // window.location.href = 'verify.html';

                            this.$message.success('表单提交成功');
                        } else {
                            if (!this.agreement) {
                                this.$message.error('请阅读并同意相关协议');
                            }
                            return false;
                        }
                    });
                }
            },
            watch: {
                // 当企业名称或信用代码变化时，同步更新开票信息中的对应字段
                'dataForm.Enterprise_Name'(val) {
                    if (!this.dataForm.Invoice_Name) {
                        this.dataForm.Invoice_Name = val;
                    }
                },
                'dataForm.Credit_Code'(val) {
                    if (!this.dataForm.Invoice_Credit_Code) {
                        this.dataForm.Invoice_Credit_Code = val;
                    }
                }
            }
        });
    </script>

    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>

</body>

</html>